<template>
  <div>
    <cus-modal ref="modal" title="查看详情" :width="1100" @on-visible-change="onVisibleChange">
      <cus-search style="margin-top:-20px;">
        <cus-search-item>
          <Form
            :model="form"
            :label-width="100"
            @keydown.native.enter.prevent="onInit"
          >
            <FormItem label="供应商名称" class="mr_10 mb_20">
              <Input v-model="form.supplyName" disabled style="width: 175px" />
            </FormItem>
            <FormItem
              label="采购计划名称"
              :label-width="110"
              class="mr_10 mb_20"
            >
              <Input
                v-model="form.purchasingPlanName"
                disabled
                style="width: 280px"
              />
            </FormItem>
            <FormItem label="供应时间点" class="mr_10 mb_20">
              <Select
                placeholder="全部"
                v-model="form.week"
                @on-change="weekChange"
                clearable
                style="width: 185px"
              >
                <Option
                  v-for="item in weekTree"
                  :value="item.label"
                  :key="item.label"
                  >{{ item.label }}</Option
                >
              </Select>
            </FormItem>
          </Form>
        </cus-search-item>
      </cus-search>
      <Table
        border
        :loading="form.loading"
        :columns="columns"
        :data="data"
        :size="vuex_config.tableSize"
      >
      </Table>
      <div class="mt_10" v-if="data.length>0">
        <cus-page
          :data="pages"
          class="mt_10" 
          style="display:flex;justify-content:flex-end;"
          @pageChange="postApiPurchasingPurchasingdtlListApi"
        ></cus-page>
      </div>
      <div slot="footer">
      <slot name="footer">
        <div class="modal-footer">
          <!-- <cus-button type="primary" size="small" @onClick="onOk"
            >关闭</cus-button
          > -->
        </div>
      </slot>
    </div>
    </cus-modal>
  </div>
</template>

<script>
import { postApiPurchasingPurchasingdtlList } from "@/api/business/manager";

const form = {
  id: "",
  supplyName: "", //供应商名称
  purchasingPlanName: "", //采购计划名称
  week: "", //供应时间节点value值
};
const weekTree = [
  {
    label: "全部",
  },
  {
    label: "上星期日",
  },
  {
    label: "星期一",
  },
  {
    label: "星期二",
  },
  {
    label: "星期三",
  },
  {
    label: "星期四",
  },
  {
    label: "星期五",
  },
  {
    label: "星期六",
  },
  {
    label: "星期日",
  },
];
const columns = [
   {
    title: "序号",
    type: "index",
    width: 70,
    align: "center",
  },  {
    title: "食材种类名称",
    width: 125,
    key: "foodTypeName",
    align: "center",
  },
  {
    title: "食材名称",
    width: 125,
    key: "ingredientsName",
    align: "center",
  },
  {
    title: "数量",
    width: 80,
    key: "packagingQty",
    align: "center",
  },
  // {
  //   title: "单位",
  //   width: 80,
  //   key: "unit",
  //   align: "center",
  // },
  // {
  //   title: "重量",
  //   width: 80,
  //   key: "weight",
  //   align: "center",
  // },
  {
    title: "规格",
    width: 80,
    key: "specifications",
    align: "center",
  },
  {
    title: "价格",
    width: 80,
    key: "price",
    align: "center",
  },
  {
    title: "总价（元）",
    width: 120,
    key: "money",
    align: "center",
  },
  {
    title: "供应时间",
    // width: 185,
    key: "supplyTimeWeek",
    align: "center",
  },
];
export default {
  components: {},
  name: "showSupplierPurchase",
  data() {
    return {
      loading: false,
      form: form,
      weekTree: weekTree, //供应时间节点
      columns: columns,
      data: [],
      pages: {
        page: 1,
        pageSize: 10,
        pageTotal: 0,
      },
    };
  },

  mounted() {},
  methods: {
    show() {
      this.loading = true
      this.$refs["modal"].show = true;
      this.postApiPurchasingPurchasingdtlListApi();
    },
    //供应时间节点事件
    weekChange(v) {
      if (v == "全部") {
        this.form.week = null;
      }
      this.postApiPurchasingPurchasingdtlListApi();
    },
    onVisibleChange(v) {
      
      Object.assign(this.pages, this.$options.data().pages);
    },
    //查询采购清单列表-----------------------接口
    postApiPurchasingPurchasingdtlListApi() {
      return new Promise((resolve) => {
        let params = {
          supplierPurchasingId: this.form.id,
          week: this.form.week,
          size: this.pages.pageSize,
          current: this.pages.page,
        };
        postApiPurchasingPurchasingdtlList(params).then((res) => {
          this.loading = false;
          if (res.retCode == 2000) {
            this.data = res.data.records;
            this.data.forEach((element) => {
              // element.weight = element.weight / 1000;
              // element.price = element.price / 100;
              // element.money = element.money / 100;
              element.supplyTimeWeek =
                new Date(element.supplyTime).Format("yyyy-MM-dd") +
                "-" +
                element.week;
            });
            this.pages.pageTotal = res.data.total;
          }
          resolve();
        });
      });
    },
    onOk() {
      this.$refs["modal"].show = false;
    },
  },
};
</script>

<style scoped lang="less">

</style>
